<template>
    <div>
        <div class="mui-card" v-for="(item,index) in list" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch v-model="item.select" @change="changes(index,item.select)"></mt-switch>
                    <img src="https://gd3.alicdn.com/imgextra/i12/811633209/TB2mHvjc8jTBKNjSZFuXXb0HFXa_!!811633209.jpg" alt="">
                    <div>
                        <h4>五冠Apple/苹果 iPhone 6s国行 苹果6s正品iPhone6sp手机4g全网通{{item.num}}</h4> 
                        <p>
                            <b>￥{{item.price}}</b>
                            <num :index="index" :value="item.num" :max="item.max" :min="1" @parentEvent = "getData"></num>
                            <span @click="remove(index)">删除</span>
                        </p>
                    </div>
                   
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div>
                        <p>
                            总计（不含运费）
                        </p>
                        <p>
                            已勾选商品<b>{{num}}</b>件，总价<b>￥{{pay}}</b>元
                        </p>
                    </div>
                    <div>
                        <button type="button" class="mui-btn mui-btn-danger" @click="tishi">
                            去结算
				        </button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import num from '../numJJ/shoppingNum.vue'
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            select : true,
            list : [],
            pay : 0,
            num : 0
        }
        
    },
    created(){
        this.list = JSON.parse(localStorage.getItem("car")||"[]")
        this.payment()
    },
    methods : {
        getData(data,index){
            var o = {
                id:index,
                num:data
            }
            this.$store.commit("getShoppingCarNum",o)

            this.payment()
        },
        remove(index){
            this.list.splice(index,1)
            this.$store.commit("removeCar",index)
        },
        changes:function(index,state){
            var data = {
                index,state
            }
            this.$store.commit('amendSelect',data)
            this.payment()
        },
        tishi(){
            Toast("此功能正在开发")
        },
        payment(){//结算金额
            this.pay = 0
            this.num = 0
            this.list = JSON.parse(localStorage.getItem("car")||"[]")
            this.list.forEach((element,index) => {
                if(element.select){
                    this.pay += element.num * element.price
                    this.num += element.num
                    console.log(element)
                }
            });
           
        }

    },
    watch :{

    },
    components : {
      num  
    }
}
</script>
<style scoped>
    .mui-card-content-inner{
        display: flex;
        align-items: center;
    }
    .mui-card-content-inner>div>p{
        display: inline-block
    }
    .mui-card-content-inner>img{
        width: 60px;
        /* height:90px; */
    }
    h4{
        font-size: 12px
    }
    .mui-card-content-inner b{
        color: red
    }
    .mui-card-content-inner span{
        color: #26a2ff;
    }
</style>


